<template>
  <div class="activiti-tasks">
    <Tabs :value="isProcessed" @on-click="tabClick">
      <TabPane label="待审核" name="no"></TabPane>
      <TabPane label="已审核" name="yes"></TabPane>
    </Tabs>
    <table-search @searchBack="serachTableData">
    </table-search>
    <div class="table-content">
      <Table :columns="columns" height="520" :data="tableData"></Table>
    </div>
    <div class="foot-center">
      <Page :total="page.total"
            :current="page.current"
            :page-size="page.size"
            @on-change="pageChange"
            @on-page-size-change="sizeChange"
            show-sizer
            show-total/>
    </div>

    <Drawer :title="drawerTitle" class="drawer-area" width="70%" v-model="showDraw" @on-close="closeDrawer">
      <!--请假-->
      <leave-form v-if="processObject.businessId&&processObject.processDefinitionKey==='leave'"
                  @infoBack="infoBackData"
                  :disabled="true"
                  :businessId="processObject.businessId"
      ></leave-form>
      <div class="drawer-foot">
        <Tabs :value="auditTab" @on-click="clickTab">
          <TabPane label="审批" name="1"></TabPane>
          <TabPane label="历史" name="2"></TabPane>
        </Tabs>
        <div v-show="auditTab==='1'">
          <audit-form @close-drawer="closeDrawer" @fresh-data="getTaskData" :processObject="processObject"
                      :variables="objectInfo"></audit-form>
        </div>
        <div v-show="auditTab==='2'">
          <audit-records :businessId="processObject.businessId" v-if="processObject.businessId"
                         class="audit-record"></audit-records>
        </div>
      </div>
    </Drawer>

    <Modal
      v-model="modal.show"
      :title="modal.title"
      :width="modal.width"
      scrollable
      class="modal-area"
      footer-hide
    >
      <img :src="processImg" class="process-img" ref="processImg">
      <img :src="processImg2"  style="display: none" ref="processImg2">
    </Modal>
  </div>
</template>

<script>
import * as API from "@/api/bpmn-api";
import tableSearch from "_c/table-components/table-search"
import auditForm from "./audit-form"
import leaveForm from "./../sys/sys-leave-form"
import auditRecords from "_c/activiti/audit-records"

export default {
  name: "activiti-tasks",
  components: {tableSearch, auditForm, leaveForm, auditRecords},
  data() {
    return {
      showDraw: false,
      drawerTitle: "",
      isProcessed: "no",
      processImg: "",
      processImg2: "",
      processObject: {
        processInstanceId: "",
        businessId: "",
        processDefinitionKey: "",
      },
      auditTab: "1",
      objectInfo: {},
      modal: {
        show: false,
        title: "",
        type: ""
      },
      page: {
        total: 0,
        current: 1,
        size: 10
      },
      searchName: "",
      columns: [
        {
          title: '任务名称',
          key: 'name',
          minWidth: 200,
        },
        {
          title: '任务环节',
          key: 'currentNode'
        },
        {
          title: '创建时间',
          key: 'createDate'
        },
        {
          title: '关联id',
          key: 'businessId'
        },
        {
          title: '操作',
          align: "center",
          render: (h, params) => {
            let auditBtn = this.isProcessed === "no" ? h('Button', {
              props: {
                size: 'small'
              },
              style: {
                marginRight: '5px'
              },
              on: {
                click: () => {
                  this.auditTask(params.row)
                }
              }
            }, '审核') : null
            return h('div', [
              auditBtn,
              h('Button', {
                props: {
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.viewAuditImg(params.row)
                  }
                }
              }, '流程图'),
            ]);
          }
        },
      ],
      tableData: [],
    }
  },
  methods: {

    clickTab(val) {
      this.auditTab = val
    },

    //侧滑打开后,回调的值
    infoBackData(obj) {
      this.objectInfo = obj
    },

    //关闭侧滑
    closeDrawer() {
      this.drawerTitle = ""
      this.processObject.businessId = ""
      this.processObject.processInstanceId = ""
      this.processObject.processDefinitionKey = ""
      this.showDraw = false
    },


    tabClick(value) {
      this.isProcessed = value
      this.page.current = 1
      this.getTaskData()
    },
    serachTableData(value) {
      this.searchName = value
      this.page.current = 1
      this.getTaskData()
    },

    //查看流程图
    viewAuditImg(row) {
      API.getAuditedImg({
          processInstanceId: row.processInstanceId,
          processDefinitionId: row.processDefinitionId,
        }
      ).then(res => {
        if (res.status === 200) {
          const that = this
          that.processImg = window.URL.createObjectURL(res.data)
          that.modal.show = true
          that.modal.title = "查看流程图"
          that.modal.width = "50vw"
          that.processImg2 = window.URL.createObjectURL(res.data)
          let img =  that.$refs.processImg2
          img.onload = function(){
            let c = document.createElement('canvas');//创建处理画布对象
            let ctx = c.getContext('2d');
            c.width = img.width;
            c.height = img.height;
            ctx.drawImage(img,0,0);//绘制
            let imgData = ctx.getImageData(0, 0, c.width, c.height).data;//读取图片数据
            let lOffset = c.width, rOffset = 0,tOffset = c.height, bOffset = 0;
            for (let i = 0; i < c.width; i++) {
              for (let j = 0; j < c.height; j++) {
                let pos = (i + c.width * j) * 4
                if (imgData[pos] == 255 || imgData[pos + 1] == 255 || imgData[pos + 2] == 255 || imgData[pos + 3] == 255) {
                  bOffset = Math.max(j, bOffset); // 找到有色彩的最下端
                  rOffset = Math.max(i, rOffset); // 找到有色彩的最右端
                  tOffset = Math.min(j, tOffset); // 找到有色彩的最上端
                  lOffset = Math.min(i, lOffset); // 找到有色彩的最左端
                }
              }
            }
            lOffset++;
            rOffset++;
            tOffset++;
            bOffset++;
            let x = document.createElement("canvas");//创建处理后画布对象
            x.width = rOffset-250;
            x.height = bOffset+100;
            let xx = x.getContext("2d");
            xx.drawImage(img, lOffset-100, tOffset-150, x.width, x.height, 0, 0, x.width, x.height);//绘制
            that.$refs.processImg.src = x.toDataURL()
          }
        }
      })
    },


    pageChange(page) {
      this.page.current = page
      this.getTaskData()
    },
    sizeChange(size) {
      this.page.current = 1
      this.page.size = size
      this.getTaskData()
    },

    //获取我的任务列表
    getTaskData() {
      API.getTasks({
        page: {
          current: this.page.current,
          size: this.page.size
        },
        isProcessed: this.isProcessed,
        taskName: this.searchName
      }).then(res => {
        if (res.code === "0") {
          this.page.total = parseInt(res.data.total)
          this.tableData = res.data.records
        }
      })
    },

    //任务审核
    auditTask(row) {
      this.processObject.businessId = row.businessId
      this.processObject.processInstanceId = row.processInstanceId
      this.processObject.processDefinitionKey = row.processDefinitionKey
      this.showDraw = true
      switch (row.processDefinitionKey) {
        case "leave":
          this.drawerTitle = "请假审核"
          break;
      }

    }

  },
  mounted() {
    this.getTaskData()
  }
}
</script>

<style lang="less" scoped>
.activiti-tasks {
  width: 100%;

  .table-content {
    padding: 10px;
    text-align: center;
  }
}

.drawer-foot {
  height: 290px;
  position: fixed;
  width: 100%;
  margin-left: -15px;
  overflow: paged-y-controls;
  bottom: 0px;

  .audit-record {
    height: 240px;
    overflow: auto;
    padding-left: 20px;
  }
}
</style>
